<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h2{
        text-align: center;
    }
    .container{
        margin: 0 auto;
        /* text-align: center; */
        background: rgb(197,154,174);
        width: 381px;
        height: 224px;
        
    }
    div{
        color: aliceblue;
    }
    .label{
        display: flex;
        justify-content: space-evenly;
    }
    button{
        width: 64px;
        height: 29px;
        background: rgb(255,255,255);
        outline: 0;
        border:0;
        border-radius: 5px;
    }
    input{
        border-radius: 5px;
        outline: 0;
        border:0;
        height: 20px;
        width: 75%;
    }
    .container div{
        margin:20px;

    }
    .first{
        padding-top: 30px;
    }
</style>
<body>
    <h2>计算器</h2>
    <div class="container">
        <div class="first">第一个数：<input type="text" id="first"></div>
        <div class="second">第二个数：<input type="text" id="second"></div>
        <div class="label">
            <button onclick="add()">+</button>
            <button onclick="munus()">-</button>
            <button onclick="multi()">*</button>
            <button onclick="divid()">/</button>
        </div>
        <div>
            结果：<input id="result" readonly>
        </div>
    </div>
</body>
<script> 
    function add(){
        var add_01 = Number(document.getElementById("first").value);
        var add_02 = Number(document.getElementById("second").value);
        document.getElementById("result").value = add_01+add_02
    } 
    function munus(){
        var add_01 = Number(document.getElementById("first").value);
        var add_02 = Number(document.getElementById("second").value);
        document.getElementById("result").value = add_01-add_02;
    }
    function multi(){
        var add_01 = Number(document.getElementById("first").value);
        var add_02 = Number(document.getElementById("second").value);
        document.getElementById("result").value = add_01*add_02;
    }
    function divid(){
        var add_01 = Number(document.getElementById("first").value);
        var add_02 = Number(document.getElementById("second").value);
        document.getElementById("result").value = add_01/add_02;
    }
</script>
</html>